<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/gou.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>

<body>
	<div class="gou_bar">
		<div class="inner">
			<a href="index.php"><img src="img/logo.png" /></a>
			<ul class="bar_ul">
				<li>我的购物车</li>
				<li>确认订单信息</li>
				<li>等待付款</li>
				<li>订单执行</li>
			</ul>
		</div>

	</div>

	<div class="shopping">
		<h4>保税区</h4>

		<table id="cartTable">
			<thead>
				<tr>
					<th><label><input class="check-all check" type="checkbox" />&nbsp;全选</label></th>
					<th>商品信息</th>
					<th>商品单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/20150708112148lm2t0.jpg"
							alt="" /><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）</span></td>
					<td class="price">59.88</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">220.88</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/201509091748430829.jpg"
							alt="" /><span>日本Merries花王新生儿纸尿裤S82</span></td>
					<td class="price">388.50</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">388.50</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
					<td class="price">148.50</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">1428.50</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/201608081427026196.jpg"
							alt="" /><span>韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货 </span></td>
					<td class="price">640.60</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">640.60</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
			</tbody>
		</table>
		<div class="foot" id="foot">
			<label class="fl select-all"><input type="checkbox" class="check-all check" />&nbsp;全选</label>
			<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

			<div class="fr closing">立即购买</div>
			<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
			<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
					class="arrow up">︽</span><span class="arrow down">︾</span></div>
			<div class="selected-view">
				<div id="selectedViewList" class="clearfix">
				</div>
				<span class="arrow">◆<span>◆</span></span>
			</div>
		</div>
	</div>


	<div class="last">
		<h5 class="last_h5">
			<img src="img/trduty_bg.jpg" />
			个人邮递进口物品清关税收解读
		</h5>
		<div class="last_bot">
			<ul>
				<li class="last_li0">个人邮递进境物品须界定为<a class="last_bot_sp1" href="">个人自用</a></li>
				<li><span class="last_li1">免征税</span>奶粉线征收跨境税，<span
						class="last_bot_sp2">取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span></li>
				<li><span
						class="last_li2">非个人清关</span>奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；
				</li>
				<li><span class="last_li3">被税</span>自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。
				</li>
			</ul>
		</div>
	</div>


	<div class="BOTTOM">
		<div class="BB">
			<img src="img/bot_slogan.png" alt="" />
		</div>
	</div>
	<!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
	<div class="BigBottom">
		<div class="Big">
			<div class="Big1">
				<p><a style="color: white;" href="#">海淘橙</a></p>
				<p class="Big1a"><a href="#">关于我们</a></p>
				<p class="Big1a"><a href="#">免责声明</a></p>
				<p class="Big1a"><a href="#">联系我们</a></p>
			</div>
			<div class="Big2">
				<p><a style="color: white;" href="#">海淘橙</a></p>
				<p class="Big1a"><a href="#">意见/建议</a></p>
				<p class="Big1a"><a href="#">海淘购物</a></p>
				<p class="Big1a"><a href="#">友情链接</a></p>
			</div>
			<div class="Big3">
				<p><a style="color: white;" href="#">帮助中心</a></p>
				<p class="Big1a"><a href="#">新手指南</a></p>
				<p class="Big1a"><a href="#">常见问题</a></p>
				<p class="Big1a"><a href="#">正品保证</a></p>
				<p class="Big1a"><a href="#">物流配送</a></p>
			</div>
			<div class="Big4">
				<p><a style="color: white;" href="#">资讯频道</a></p>
				<p class="Big1a"><a href="#">海淘咨询</a></p>
				<p class="Big1a"><a href="#">网站公告</a></p>
				<p class="Big1a"><a href="#">网站地图</a></p>
			</div>
			<div class="Big5"></div>
			<div class="Big6"></div>
			<div class="Big7">
				<span class="Big7a">微信订阅号</span>
				<span class="Big7b">扫一扫有惊喜</span>
				<img src="img/emw1.png" alt="" />
			</div>
			<div class="Big7">
				<span class="Big7a">微信订阅号</span>
				<span class="Big7b">扫一扫有惊喜</span>
				<img src="img/emw1.png" alt="" />
			</div>
			<div class="Big8"></div>
			<div class="Big9"></div>
			<div class="Big10">
				<p class="Big10a">关注我们</p>
				<img src="img/xlkjk.png" alt="" />
				<p class="Big10c">邮件订阅</p>
				<input class="Big10d" type="text" placeholder="请输入您的邮箱地址，订阅最新优惠" />
				<div class="Big10e">订阅</div>
			</div>
			<div class="Big11"></div>
			<div class="Big12"></div>
			<div class="Big13">Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights Reserved.粤ICP备14073754号-1</div>
		</div>
	</div>

	<!--右侧购物栏-->
	<div class="right_l">
		<div class="regist_wrap">
			<div class="regist"></div>
		</div>
		<div class="regist_wrap2">
			<div class="regist2"></div>
			<p>一键购</p>
		</div>
		<div class="regist_wrap3">
			<div class="regist3"></div>
			<p>购物车</p>
		</div>
		<div class="regist_wrap4">
			<div class="regist4"></div>
		</div>
		<div class="regist_wrap5">
			<div class="regist5"></div>
		</div>
		<div class="regist_wrap6">
			<div class="regist6"></div>
		</div>
		<div class="regist_wrap7">
			<div class="regist7"></div>
		</div>

		<div class="regist_wrap8">
			<div class="regist8"></div>
		</div>
	</div>
	<script>
		// 数据驱动思维；
		// 数据优先;
		var data = [
			{
				pname: "飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）",
				price: 59,
				num: 1,
				ischecked: false,
				img: "img/images/20150708112148lm2t0.jpg"
			},
			{
				pname: "日本Merries花王新生儿纸尿裤S82",
				price: 388,
				num: 1,
				ischecked: false,
				img: "img/images/201509091748430829.jpg"
			},
			{
				pname: "Sony/索尼 DSC-WX300",
				price: 148,
				num: 1,
				ischecked: false,
				img: "img/images/3.jpg"
			}, {
				pname: "韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货",
				price: 640,
				num: 1,
				ischecked: false,
				img: "img/images/201608081427026196.jpg"
			},
		];

		// 1.根据数据渲染视图
		var tbodyEle = document.querySelector("tbody");
		function renderDom(data) {
			tbodyEle.innerHTML = "";
			data.forEach(function (item, key) {
				var trEle = document.createElement("tr");
				trEle.innerHTML = `<td class="checkbox"><input class="check-one check" ${item.ischecked ? 'checked' : ''} type="checkbox" /></td>
									<td class="goods"><img src="${item.img}"
											alt="" /><span>${item.pname} </span></td>
									<td class="price">${item.price}</td>
									<td class="count"><span class="reduce">${item.num > 1 ? '-' : ''} </span><input class="count-input" type="text"
											value="${item.num}" /><span class="add">+</span></td>
									<td class="subtotal">${item.num * item.price}</td>
									<td class="operation"><span class="delete">删除</span></td>`;
				tbodyEle.appendChild(trEle);
				// 点击添加产品数量；
				// 获取td 存放count的元素
				var countTd = trEle.querySelector(".count");
				countTd.onclick = function (e) {
					var target = e.target;
					// 添加
					if (target.className == 'add') {
						console.log("点击了添加按钮", key);
						// 先改变数据，然后再更改视图；
						data[key].num++;
						// console.log(data);
						renderDom(data);
						productCount()
						priceTotal()
					}
					// 减少
					if (target.className == 'reduce') {
						if (data[key].num > 1) {
							data[key].num--;
							renderDom(data);
							productCount()
							priceTotal()
						}

					}
				}

				// 删除
				// 获取删除按钮；
				var delEle = trEle.querySelector(".delete");
				delEle.onclick = function () {
					// console.log(key);
					// 数据驱动 
					data.splice(key, 1);
					// console.log(data);
					renderDom(data);
					productCount()
					priceTotal()
				}


				// 给单选的checkbox绑定事件；
				// 获取单选的checkbox
				var checkoneEle = trEle.querySelector(".check-one");
				checkoneEle.onclick = function () {
					// console.log("点击了");
					// console.log(this.checked);
					// console.log(key);
					// 把视图里的checked 和数据里的ischecked 保持一致；
					data[key].ischecked = this.checked;
					// console.log(data);
					// 通过数据来判断是否需要勾选全选按钮；
					var ischeckAll = data.every(function (item) {
						return item.ischecked;
					})
					// console.log(ischeckAll);
					// 获取2个按钮 勾选的状态都改变
					var checkallEle = document.querySelectorAll(".check-all");
					checkallEle.forEach(function (item) {
						item.checked = ischeckAll;
					})
					productCount()
					priceTotal()
				}



			})


		}


		renderDom(data);


		// 获取全选按钮
		var checkAllEle = document.querySelectorAll(".check-all");
		checkAllEle.forEach(function (item) {
			item.onclick = function () {
				// console.log(this.checked);
				var that = this;
				checkAllEle.forEach(function (item) {
					item.checked = that.checked;
				})
				data.forEach(function (val) {
					val.ischecked = that.checked;
				})
				renderDom(data);
				productCount()
				priceTotal()
			}
		})


		// 删除指定的产品
		var deleteAll = document.querySelector("#deleteAll");
		deleteAll.onclick = function () {
			// console.log("点击了删除");
			var res = data.filter(function (item) {
				return !item.ischecked
			})
			data = res;
			// console.log(res);
			renderDom(res);
		}


		// 计算产品的数量
		function productCount(){

			var num = 0;
			data.forEach(function(item){
				if(item.ischecked){
					num += item.num;
				}
			})

			document.querySelector("#selectedTotal").innerHTML = num;
		}

		// 价格合计
		function priceTotal(){
			var total = 0;
			data.forEach(function(item){
				if(item.ischecked){
					total += item.num*item.price;
				}
			})
			document.querySelector("#priceTotal").innerHTML = total;
		}
	</script>
</body>

</html>